<template>
  <view>
    <z-paging ref="paging" v-model="dataList" @query="queryList" bgColor="#f8f8f8" :refresherEnabled="!isDetailsOpen">
      <template #top>
        <uv-navbar placeholder title="我的设计" :autoBack="true"></uv-navbar>
      </template>
      <view class="p-32 " :class="{ 'no-scroll': isDetailsOpen }">
        <u-checkbox-group v-model="checkboxValue" @change="handleCheckChange(item)">
          <view class="container p-26 position-relative m-b-20 rounded-16 overflow-hidden"
            v-for="(item, index) in dataList" :key="index" @click.stop="openDetails(item)">
            <view class="position-absolute t-0 r-0" @click.stop="getDelete(item)">
              <uv-image width="60rpx" height="60rpx" :src="ASSETSURL + 'deled.png'"
                :customStyle="{ 'border-radius': '0 12rpx', 'overflow': 'hidden' }"></uv-image>
            </view>
            <view class="flex">
              <u-checkbox :name="item.id" activeColor="#830102" />
              <view>
                <uv-image width="168rpx" height="168rpx" :src="item.image"></uv-image>
              </view>
              <view class="flex-1 flex-col m-l-38">
                <view class="font-30 font-weight-bold">
                  {{ item.product_name }}
                </view>
                <view class="font-28 m-t-20">实际周长:{{ item.reality_size }}cm</view>
                <view class="font-28 m-t-10">
                  {{ item.line.product_name }}({{ item.line.suk }}) {{ item.total_number || '0' }}颗珠子
                  <!-- {{item.material.map((item2) => item2.product_name +
                    'x' +
                  item2.number).join('、') }} -->
                </view>
              </view>
            </view>
            <view class="m-t-20">
              <uv-line color="#D9D9D9"></uv-line>
            </view>
            <view class="flex m-t-10 justify-bet align-ali">
              <view class="font-26 flex-ali">
                材料小计：
                <text class="font-32 font-weight-bold">￥{{ item.total_price / 100 }}</text>
              </view>
              <view class="flex-ali text-main font-26 font-weight-middle"
                @click.stop="tool.jump_nav('packageDiy/customized/customized?diy_id=' + item.id)">
                编辑修改
                <u-icon name="edit-pen" size="40rpx" color="#830102"></u-icon>
              </view>
            </view>
          </view>
        </u-checkbox-group>
      </view>
      <template #bottom>
        <view class="p-32 flex justify-bet p-b-50">
          <view class="" @click="route('/packageDiy/AIanalytics/AIanalytics')">
            <uv-image :src="ASSETSURL + 'icon4.png'" width="96rpx" height="96rpx"></uv-image>
          </view>
          <view class=""> 
            <dy-button width="576rpx" btn_bg="#840202" height="96rpx" @click="getcheckout">立即结算</dy-button>
          </view>
        </view> 
      </template>
    </z-paging>
    <specificationDetails ref="details" @close="closeDetails"></specificationDetails>
  </view>

</template>

<script setup>
import {
  myDiy,
  createOrder,
  deleteDiy
} from '@/api/api';
import {
  ref,
  onMounted,
  reactive
} from 'vue';
import {
  useStore
} from 'vuex';
import {
  useCounter
} from '@/mixins/userHooks';
const {
  tool
} = useCounter();
import {
  onReachBottom,
  onShow,
  onReady,
  onLoad
} from '@dcloudio/uni-app';
import route from '@/uni_modules/uv-ui-tools/libs/util/route.js';
const paging = ref(null);
const dataList = ref([]);
const checkboxValue = ref([]);
const details = ref(null);
const isDetailsOpen = ref(false);
const queryList = (page, limit) => {
  myDiy({
    page,
    limit
  }).then((res) => {
    paging.value.complete(res.data.data);
  });
};
const openDetails = (item) => {
  isDetailsOpen.value = true;
  details.value.open(item);
};
const closeDetails = () => {
  isDetailsOpen.value = false;
};
// 单个商品选中状态变化
const handleCheckChange = (index, value) => {
  console.log(checkboxValue.value);
};
const getDelete = (item) => {
  uni.showModal({
    title: '提示',
    content: '确定删除吗？',
    success: function (res) {
      if (res.confirm) {
        console.log('用户点击确定');
        deleteDiy({
          diy_id: item.id
        }).then((res) => {
          paging.value.reload();
        });
      } else if (res.cancel) { }
    }
  });
};
const getcheckout = () => {
  if (checkboxValue.value.length == 0) {
    uni.showToast({
      title: '请选择商品',
      icon: 'none'
    });
    return;
  }
  const selectedItems = dataList.value.filter((item) => checkboxValue.value.includes(item.id));
  route({
    url: 'pagesA/pages/productList/orderConfirmation',
    params: {
      buy_mode: 1,
      add_type: 2,
      number: checkboxValue.value.length,
      product_id: checkboxValue.value[0],
      shopList: encodeURIComponent(JSON.stringify(selectedItems)) //整个商品数据
    }
  });
};
</script>

<style lang="scss">
.container {
  width: 686rpx;
  // height: 298rpx;
  background: #ffffff;
  margin: 0 auto;
}

.submit {
  width: 650rpx;
  height: 96rpx;
  background: #830102;
  color: #fff;
  font-size: 36rpx;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
}

.no-scroll {
  overflow: hidden !important;
  height: 100vh;
}
</style>